import type { FC } from 'react';
import { useEffect, useRef } from 'react';
import { Card } from 'antd';
import AMapLoader from '@amap/amap-jsapi-loader';

const GeoDistribution: FC = () => {
  const mapContainerRef = useRef<HTMLDivElement>(null);

  // 主要城市标记数据
  const mainCities = [
    { id: 1, lng: 116.407394, lat: 39.904211, name: '北京' },
    { id: 2, lng: 121.473662, lat: 31.23037, name: '上海' },
    { id: 3, lng: 113.264385, lat: 23.129089, name: '广州' },
    { id: 4, lng: 114.057868, lat: 22.543099, name: '深圳' },
    { id: 5, lng: 104.065735, lat: 30.659462, name: '成都' },
    { id: 6, lng: 108.948024, lat: 34.263161, name: '西安' },
    { id: 7, lng: 114.305526, lat: 30.59285, name: '武汉' },
  ];

  // 区域统计数据
  const regionStats = [
    { name: '华东', value: '65%', color: '#3b82f6' },
    { name: '华北', value: '48%', color: '#10b981' },
    { name: '华南', value: '36%', color: '#f59e0b' },
    { name: '西部', value: '25%', color: '#ef4444' },
  ];

  // 内联样式
  const containerStyle = {
    padding: '12px',
    position: 'relative' as const,
    height: '400px',
  };

  const mapContainerStyle = {
    display: 'flex',
    justifyContent: 'space-between',
    height: '100%',
  };

  const mapBackgroundStyle = {
    flex: 1,
    position: 'relative' as const,
    height: '350px',
  };

  const regionStatsStyle = {
    minWidth: '100px',
    display: 'flex',
    flexDirection: 'column' as const,
    gap: '8px',
    paddingLeft: '16px',
  };

  const regionItemStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
  };

  const regionColorStyle = {
    width: '12px',
    height: '12px',
    borderRadius: '2px',
    flexShrink: 0,
  };

  const regionNameStyle = {
    fontSize: '14px',
    color: '#333',
  };

  const regionValueStyle = {
    fontSize: '14px',
    fontWeight: '600',
    color: '#3b82f6',
  };

  useEffect(() => {
    let map: any = null;

    // 加载高德地图
    AMapLoader.load({
      key: '17013f4a74cd394dc66c55b8a96c3397', // 使用时需要替换为真实的API密钥
      version: '2.0',
      plugins: ['AMap.Marker'],
    }).then((AMap: any) => {
      // 初始化地图
      map = new AMap.Map(mapContainerRef.current!, {
        center: [108.948024, 34.263161], // 西安坐标，居中显示
        zoom: 4,
        mapStyle: 'amap://styles/light', // 浅色风格
      });

      // 添加主要城市标记
      mainCities.forEach((city) => {
        const marker = new AMap.Marker({
          position: [city.lng, city.lat],
          title: city.name,
          label: {
            content: city.name,
            offset: new AMap.Pixel(0, -20),
            style: {
              color: '#333',
              fontSize: '12px',
              fontWeight: 'bold',
              backgroundColor: 'rgba(255, 255, 255, 0.8)',
              padding: '2px 6px',
              borderRadius: '4px',
            },
          },
        });
        marker.setMap(map);
      });
    }).catch((e: any) => {
      console.error('地图加载失败:', e);
    });

    // 组件卸载时销毁地图
    return () => {
      if (map) {
        map.destroy();
      }
    };
  }, []);

  return (
    <Card title="用户区域分布" size="small" extra={<span style={{ fontSize: '12px', color: '#999' }}>更新时间: 2024年7月10日</span>}>
      <div style={containerStyle}>
        <div style={mapContainerStyle}>
          <div style={mapBackgroundStyle}>
            {/* 高德地图容器 */}
            <div ref={mapContainerRef} style={{ width: '100%', height: '100%' }} />
          </div>

          {/* 区域统计数据 */}
          <div style={regionStatsStyle}>
            {regionStats.map((region, index) => (
              <div key={index} style={regionItemStyle}>
                <span
                  style={{ ...regionColorStyle, backgroundColor: region.color }}
                ></span>
                <span style={regionNameStyle}>{region.name}</span>
                <span style={regionValueStyle}>{region.value}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Card>
  );
};

export default GeoDistribution;